<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- T - title 标题-->
    <title>列表页-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- D - description 描述-->
    <meta name="description"
        content="品优购-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
    <!--K  - key  关键词-->
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
    <!-- 引入favicon图标 -->
    <link rel="stylesheet" href="/favicon.ico">
    <!-- 引入初始化样式文件 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入公共样式文件 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入 list.css 文件 -->
    <link rel="stylesheet" href="./css/list.css">
</head>
<!-- 快捷导航栏  start-->
<section class="shortcut">
    <div class="w">
        <div class="fl">
            <ul>
                <li>品优购欢迎您! &nbsp; </li>
                <li> <a href="#">请登录</a> &nbsp; <a href="#" class="style_red">免费注册</a></li>
            </ul>
        </div>
        <div class="fr">
            <ul>
                <li>我的订单</li>
                <li></li>
                <li class="arrow_icon">我的品优购</li>
                <li></li>
                <li>品优购会员</li>
                <li></li>
                <li>企业采购</li>
                <li></li>
                <li class="arrow_icon">关注品优购</li>
                <li></li>
                <li class="arrow_icon">客户服务</li>
                <li></li>
                <li class="arrow_icon">网站导航</li>
            </ul>
        </div>
    </div>
</section>
<!-- 快捷导航栏  end -->
<!-- header头部模块制作 start -->
<header class="header w">
    <div class="logo">
        <h1><a href="#" title="品优购">品优购 <img src="./images/sk_03.png" alt="" class="sk"></a></h1>
    </div>
    <!-- 搜索框 -->
    <div class="search">
        <input type="search" placeholder="语言开发">
        <button>搜索</button>
    </div>
    <!-- 热词 -->
    <div class="hotwords">
        <a href="#" class="style_red">优惠购首发</a>
        <a href="#">亿元优惠</a>
        <a href="#">9.9元团购</a>
        <a href="#">美满99减30</a>
        <a href="#">办公用品</a>
        <a href="#">电脑</a>
        <a href="#">通信</a>
    </div>
    <!-- 右侧购物车 -->
    <div class="shopcar">
        我的购物车
        <!-- 统计数量 -->
        <i class="count">6</i>
    </div>
</header>
<!-- header头部模块制作 end -->
<!-- nav  导航模块制作 start -->
<nav class="nav ">
    <div class="w">
        <div class="sk_list">
            <ul>
                <li>
                    <a href="#">品优秒杀</a>
                </li>
                <li>
                    <a href="#">即将售罄</a>
                </li>
                <li>
                    <a href="#">超值低价</a>
                </li>
            </ul>
        </div>
        <div class="sk_con">
            <ul>

                <li><a href="#">女装</a></li>
                <li><a href="#">女鞋</a></li>
                <li><a href="#">男装</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">男鞋</a></li>
                <li><a href="#">母婴童装</a></li>
                <li><a href="#">食品</a></li>
                <li><a href="#">智能数码</a></li>
                <li><a href="#">运动户外</a></li>
                <li><a href="#">更多分类</a></li>
            </ul>
        </div>
</nav>

<!-- nav  导航模块制作 end -->
<!-- sk_container 列表页主体 start -->

<div class="sk_container">
    <div class="w">
        <div class="sk_hd">
            <img src="./images/sk_hd_03.png" alt="">
        </div>
        <div class="sk_bd clearfix">
            <ul>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
                <li><a href="#">
                        <img src="./upload/02-电商-分类列表页_03.png" alt="">
                        <h4>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                        </h4>
                        <div class="price">
                            <div class="new_price"><i>￥</i>6088 </div>
                            <div class="last_price">￥6988</div>
                        </div>
                        <div class="progress">
                            <div class="lf">已售87%
                            </div>
                            <div class="bar">
                                <div class="bar_in"></div>
                            </div>
                            <div class="rf">剩余<i>29</i>件
                            </div>
                        </div>

                    </a>
                    <div class="buy_button">
                        <button>立即抢购</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- sk_container 列表页主体 end -->

<!-- 底部模块制作  start -->
<footer class="footer clearfix">
    <div class="w">
        <div class="mod_service">
            <ul>
                <li>
                    <h4></h4>
                    <div>
                        <h5>正品保障</h5>
                        <p>正品保障，提供发票</p>
                    </div>
                </li>
                <li>
                    <h4></h4>
                    <div>
                        <h5>极速物流</h5>
                        <p>急速物流，急速送达</p>
                    </div>
                </li>
                <li>
                    <h4></h4>
                    <div>
                        <h5>无忧售后</h5>
                        <p>7天无理由退换货</p>
                    </div>
                </li>
                <li>
                    <h4></h4>
                    <div>
                        <h5>特色服务</h5>
                        <p>私人定制家电套餐</p>
                    </div>
                </li>
                <li>
                    <h4></h4>
                    <div>
                        <h5>帮助中心</h5>
                        <p>您的购物指南</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="mod_help">
            <dl>
                <dt> 购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>配送方式</dt>
                <dd><a href="#">上门自提</a></dd>
                <dd><a href="#">211限时达</a></dd>
                <dd><a href="#">配送服务查询</a></dd>
                <dd><a href="#">配送费收取标准</a></dd>
                <dd><a href="#">海外配送</a></dd>
            </dl>
            <dl>
                <dt>支付方式</dt>
                <dd><a href="#">货到付款</a></dd>
                <dd><a href="#">在线支付</a></dd>
                <dd><a href="#">分期付款</a></dd>
                <dd><a href="#">邮局汇款</a></dd>
                <dd><a href="#">公司转账</a></dd>
            </dl>
            <dl>
                <dt>售后服务</dt>
                <dd><a href="#">售后政策</a></dd>
                <dd><a href="#">价格保护</a></dd>
                <dd><a href="#">退款说明</a></dd>
                <dd><a href="#">返修/退换货</a></dd>
                <dd><a href="#">取消订单</a></dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd><a href="#">夺宝岛</a></dd>
                <dd><a href="#">DIY装机</a></dd>
                <dd><a href="#">延保服务</a></dd>
                <dd><a href="#">品优购E卡</a></dd>
                <dd><a href="#">品优购通信</a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd></dd>
                <p>品优购客户端</p>
            </dl>
        </div>
        <div class="mod_copyright">
            <div class="link">
                <a href="#">关于我们</a> | <a href="#">联系我们</a>|<a href="#">联系客服 </a>|<a href="#">商家入驻 </a>|<a href="#">营销中心
                </a>|<a href="#">手机品优购 </a>|<a href="#">友情链接 </a>|<a href="#">销售联盟 </a> |<a href="#">品优购社区
                </a>|<a href="#">品优购公益 </a>|<a href="#">English Site </a>|<a href="#">Contact U</a>

            </div>
            <div class="right">
                <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                    京ICP备08001421号京公网安备110108007702</p>
            </div>
        </div>
    </div>
</footer>
<!-- 底部模块制作  end -->

<body>

</body>

</html>